<template>
  <view class="login">
    <i-statusBar></i-statusBar>
    <view class="search-box">
      <view class="search-data">
        <view class="close" @click="back">
          <image src="../../static/images/close.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <!-- <i-navTitleBar></i-navTitleBar> -->
    <!-- <view>

		</view> -->

    <view class="login_body" v-if="isLogin">
      <view class="loing_title">
        <view class="title_text">嗨，欢迎登录</view>
        <!-- <view>车主省钱必备神器</view> -->
      </view>
      <view class="loginForm">
        <input
          v-model="appCommonLogReq.mobile"
          class="input"
          placeholder="请输入账号"
          type="text"
        />
        <view
          class="input"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <input
            v-if="!showPassword"
            v-model="appCommonLogReq.password"
            placeholder="请输入密码"
            type="password"
          />
          <input
            v-else
            v-model="appCommonLogReq.password"
            placeholder="请输入密码"
            type="text"
          />
          <uni-icons
            v-if="!showPassword"
            type="eye"
            size="24"
            @click="showPassword = !showPassword"
          />
          <uni-icons
            v-else
            type="eye-slash"
            size="24"
            @click="showPassword = !showPassword"
          />
        </view>
        <!-- <i-slider @success="sliderShow = true"></i-slider> -->
        <view style="height: 40rpx"></view>
        <i-buttons
          :disabled="logDisabled"
          radius="4rpx"
          color="#fff"
          bgColor="#FB652E"
          border="none"
          padding="18rpx 0"
          @click="login"
          size="32"
          >立即登录</i-buttons
        >
        <view class="form_title">
          <text @click="toRegister"
            >没有账号？<text style="color: #fb652e">立即注册</text></text
          >
          <text style="color: #ff9400" @click="missPassword">忘记密码</text>
        </view>
        <view class="form_conceal">
          <radio
            @click="checkValue = !checkValue"
            :checked="checkValue"
            color="#FB652E"
            style="transform: scale(0.7)"
          />
          我已阅读并同意
          <text
            @click="
              navTo('/pages/views/accord?agreementId=10010001', 'navigateTo')
            "
            >《用户协议》</text
          >和
          <text
            @click="
              navTo('/pages/views/accord?agreementId=10010004', 'navigateTo')
            "
            >《隐私政策》</text
          >
        </view>
      </view>
      <!-- <view class="wxLogin" @click="wxLogin" v-if="wxShow === '0'">
				<image src="../../static/images/WeChat_icon.png" mode=""></image>
				<text>微信登录</text>
			</view> -->
    </view>

    <view v-else class="login_body">
      <view class="loing_title">
        <view
          class="title_text"
          style="margin-top: -32rpx; margin-bottom: 24rpx"
          >账号注册</view
        >
        <i-tab
          v-model="activeIndex"
          @change="resetRegisterForm"
          :isScroll="false"
          :list="[
            {
              title: '手机号注册',
              id: '0',
            },
            {
              title: '邮箱注册',
              id: '1',
            },
          ]"
        ></i-tab>
      </view>
      <view class="loginForm">
        <input
          v-model="registerForm.nickName"
          class="input"
          placeholder="请输入昵称"
          type="text"
        />
        <input
          v-if="activeIndex === 0"
          v-model="registerForm.mobile"
          class="input"
          placeholder="请输入手机号"
          type="number"
        />
        <input
          v-else
          v-model="registerForm.mobile"
          class="input"
          placeholder="请输入邮箱"
          type="text"
        />
        <view class="form_data">
          <i-kaptcha
            ref="kaptcha"
            @change="(e) => (registerForm.kaptcha = e)"
          ></i-kaptcha>
        </view>

        <i-verification
          :type="activeIndex === 0 ? 'signUp' : 'signUpEmail'"
          style="margin-bottom: 40rpx"
          :mobile="registerForm.mobile"
          right="108rpx"
          :title="false"
          width="100%"
          color="#FF7B00"
          :kaptcha="registerForm.kaptcha"
          ref="verification"
          v-model="registerForm.smsCode"
        >
        </i-verification>
        <view class="input">
          <input
            v-model="registerForm.password"
            placeholder="请输入密码"
            type="password"
          />
          <view class="message">
            *登录密码需同时含有字母和数字，长度在6-12之间
          </view>
        </view>
       
        <view class="input">
          <input
            v-model="registerForm.payPwd"
            placeholder="请输入支付密码"
            type="password"
          />
          <view class="message">
            *支付密码必须为六位数字，且不连续或重复相同
          </view>
        </view>

        <input
          class="input"
          v-model="registerForm.recommenderInvitation"
          placeholder="请输入邀请码"
          type="text"
        />
        <i-buttons
          :disabled="regDisabled"
          radius="4rpx"
          color="#fff"
          bgColor="#FB652E"
          border="none"
          padding="18rpx 0"
          @click="registerData"
          size="32"
          >立即注册</i-buttons
        >
        <view class="form_title">
          <text @click="isLogin = true"
            >已有账号？<text style="color: #fb652e">立即登录</text>
          </text>
        </view>
        <view class="form_conceal">
          <radio
            :checked="checkValue"
            @click="checkValue = !checkValue"
            color="#FB652E"
            style="transform: scale(0.7)"
          />
          我已阅读并同意
          <text
            @click="
              navTo('/pages/views/accord?agreementId=10010001', 'navigateTo')
            "
            >《用户协议》</text
          >和
          <text
            @click="
              navTo('/pages/views/accord?agreementId=10010004', 'navigateTo')
            "
            >《隐私政策》</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import {
  navTo,
  setStorage,
  checkForm,
  showTost,
  getStorage,
} from "../../utils/common";
import { phoneReg, passwordReg, smsCodeReg, emailReg } from "../../utils/regs";
import { loginIn, registerEmail, registerPhone } from "../../api/index";
import useStore from "../../stores/index";
import { onShow,onReady } from "@dcloudio/uni-app";
import _ from "lodash";

const store = useStore();
const checkValue = ref(false);
const sliderShow = ref(false);
const logDisabled = ref(false);
const regDisabled = ref(false);
const wxShow = ref("0");
const activeIndex = ref(0);
const verification = ref<any>(null);
const kaptcha = ref<any>(null);
const showPassword = ref(false);

const isLogin = ref(true);
const appCommonLogReq = reactive({
  mobile: "",
  password: "",
});
const registerForm = reactive<any>({
  nickName: "",
  mobile: "",
  password: "",
  recommenderInvitation: "",
  smsCode: null,
  payPwd: "",
  kaptcha: "",
});

onReady(()=> {
  const invitationCode = getStorage("invitationCode");
  if (invitationCode) {
    registerForm.recommenderInvitation = invitationCode;
  }
})

const login = async () => {
  if (!checkValue.value) {
    uni.showToast({
      icon: "none",
      title: "请勾选协议",
    });
    return;
  }
  // if (!sliderShow.value) {
  //   uni.showToast({
  //     icon: "none",
  //     title: "请拖动滑块验证",
  //   });
  //   return;
  // }

  logDisabled.value = true;
  try {
    const { data } = await loginIn(appCommonLogReq as any);
    setStorage("token", data.token);
    setStorage("userId", data.userId);
    await store.setUserInfo();
    showTost("登录成功", () => {
      const pages = getCurrentPages();
      if (pages.length === 1) {
        uni.reLaunch({
          url: "/pages/user/user",
        });
        return;
      } else {
        uni.navigateBack();
      }
      // navTo("", "navigateBack");
    });
  } catch {
  } finally {
    logDisabled.value = false;
  }
};

const missPassword = () => {
  uni.navigateTo({
    url: "/pages/views/miss_password",
  });
};
const back = () => {
  const pages = getCurrentPages();
  if (pages.length === 1) {
    uni.reLaunch({
      url: "/pages/user/user",
    });
    return;
  }
  uni.navigateBack();
};

const toRegister = () => {
  isLogin.value = false;
  checkValue.value = false;
};

const registerData = async () => {
  if (!checkValue.value) {
    uni.showToast({
      icon: "none",
      title: "请勾选协议",
    });
    return;
  }

  const flag = checkForm(registerForm, ["recommenderInvitation", "kaptcha"], {
    mobile: {
      reg: activeIndex.value === 0 ? phoneReg : emailReg,
      message: "请输入正确账号",
    },
    // password: {
    //   reg: passwordReg,
    //   message: "登录密码需同时含有字母和数字，长度在6-12之间",
    // },
    smsCode: {
      reg: smsCodeReg,
      message: "请输入6位验证码",
    },
  });
  if (flag) {
    return;
  }
  regDisabled.value = true;
  try {
    const { data } =
      activeIndex.value === 0
        ? await registerPhone({
            nickName: registerForm.nickName,
            password: registerForm.password,
            payPwd: registerForm.payPwd,
            recommenderInvitation: registerForm.recommenderInvitation,
            mobile: registerForm.mobile,
            smsCode: registerForm.smsCode,
          })
        : await registerEmail({
            nickName: registerForm.nickName,
            password: registerForm.password,
            payPwd: registerForm.payPwd,
            recommenderInvitation: registerForm.recommenderInvitation,
            email: registerForm.mobile,
            emailCode: registerForm.smsCode,
          });
    setStorage("token", data.token);
    setStorage("userId", data.userId);
    await store.setUserInfo();
    showTost("注册成功！即将自动登录...", () => {
      uni.switchTab({
        url: "/pages/user/user",
      });
      regDisabled.value = false;
    });
  } catch (err) {
    regDisabled.value = false;
  }
};

const resetRegisterForm = () => {
  registerForm.nickName = "";
  registerForm.mobile = "";
  registerForm.password = "";
  registerForm.recommenderInvitation = "";
  registerForm.smsCode = null;
  registerForm.payPwd = "";
  checkValue.value = false;
  registerForm.kaptcha = "";
  verification.value?.reset();
  kaptcha.value?.reset();
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  min-height: 100vh;
  background: url(../../static/images/user_bg.png) top center no-repeat;
  background-size: 100% 580rpx;
  background-position: top;
  .close {
    padding: 24rpx;

    image {
      width: 48rpx;
    }
  }

  .login_body {
    @include flexC;
    padding: 0 64rpx;
    margin-top: -80rpx;

    .loing_title {
      margin-top: 120rpx;
      @include flexC;
      @include dfont($size: 26rpx);
      // color: #FFFFFF;
      color: #000;
      margin-bottom: 48rpx;

      .title_text {
        font-size: 48rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bold;
        // color: #FFFFFF;
        color: #000;
        margin-bottom: 8rpx;
      }
    }

    .loginForm {
      @include dfont;
      margin-bottom: 200rpx;

      .input {
        // @include dinput(72rpx);
        margin-bottom: 40rpx;
        // color: #fff;
        color: #000;
        border-bottom: 1px solid #e6e6e6;
      }
      input {
        // @include dinput(72rpx);
        height: 72rpx;
      }

      .form_title {
        @include flexRS;
        // color: #ff7b00;
        margin-top: 40rpx;
        margin-bottom: 64rpx;

        // text:active {
        //   color: $dcolor;
        // }
      }

      .form_conceal {
        color: #a0a0ad;
        @include flexR;
        flex-wrap: wrap;

        text {
          color: $dcolor;
        }
      }
    }
  }

  .wxLogin {
    @include flexCC;
    margin-bottom: 100rpx;

    image {
      width: 104rpx;
      height: 104rpx;
    }

    text {
      margin-top: 20rpx;
      @include dfont;
      color: #fff;
    }
  }

  .message {
    color: #ff7b00;
    font-size: 22rpx !important;
    margin: 20rpx 0;
  }
}

.ss {
  margin-bottom: 0rpx !important;
}

.search-box {
  width: 100%;
  height: 88rpx;
  // background-color: #fff;
  // border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .search-data {
    width: 100%;
    height: calc(var(--status-bar-height) + 88rpx);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 100;
    // padding: 0 32rpx;
    box-sizing: border-box;
    background: url(../../static/images/user_bg.png) top center no-repeat;
    background-size: 100% 580rpx;

    image {
      width: 56rpx;
      height: 56rpx;
    }
  }
}
.form_data {
  padding: 12rpx 0 24rpx 0;
  border-bottom: 1px solid rgb(230, 230, 240);
}
</style>
